<template>
  <div id="user">
    <a-layout-header>
      <a-form layout="inline" :form="form" class="search_top">
        <a-form-item>
          <img
            class="table_search"
            src="../../assets/image/icon/table_search.png"
            alt=""
          />
          <span>筛选</span>
        </a-form-item>
        <a-form-item>
          <a-input
            placeholder="输入模板名称"
            v-model="pagination.blurry"
            @keyup.enter="getFreightList('status')"
          ></a-input>
        </a-form-item>
        <!-- <a-form-item>
          <a-input placeholder="手机号" v-model="pagination.phone" @keyup.enter="getFreightList('status')"></a-input>
        </a-form-item> -->
        <!-- <a-form-item>
          <a-select
            style="width: 160px"
            placeholder="请选择店铺状态"
            :allowClear="true"
            showSearch
            :filterOption="filterOption"
            @change="roleSearchChange"
            v-decorator="['role']"
            class="selectWidth"
          >
            <a-select-option
              v-for="item of rolesList"
              :key="item.id"
              :value="item.id"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-item> -->
        <a-form-item class="fright">
          <a-button
            class="search_btn"
            icon="search"
            @click="getFreightList('status')"
            >搜索</a-button
          >
        </a-form-item>
        <a-form-item class="fright">
          <a-button class="search_btn" icon="sync" @click="initPage"
            >重置</a-button
          >
        </a-form-item>
      </a-form>
      <a-form layout="inline" class="search_top">
        <a-form-item>
          <img
            class="table_search"
            src="../../assets/image/icon/table_list.png"
            alt=""
          />
          <span>规格列表</span>
        </a-form-item>
        <a-form-item class="fright">
          <a-button type="primary" icon="plus" @click="addproduct"
            >添加规格</a-button
          >
        </a-form-item>
      </a-form>
    </a-layout-header>
    <a-layout-content>
      <!-- :row-selection="rowSelection" -->
      <a-table
        width="800px"
        :columns="columns"
        :dataSource="dataTable"
        :rowKey="(record) => record.id"
        :loading="loading"
        :pagination="false"
        bordered
      >
        <template slot="name" slot-scope="text, record">
          {{ getName(record.specificationValues) }}
        </template>
        <template slot="value" slot-scope="text, record">
          {{ getValue(record.specificationValues) }}
        </template>
        <template slot="action" slot-scope="text, record">
          <!-- <a-tag color="#933dfe" v-permission:role="['userUpdate']" @click="editUser(record)">编辑</a-tag> -->
          <a-tag color="#933dfe" @click="addproductInfo(record.id)"
            >编辑</a-tag
          >
          <!-- <a-tag color="#933dfe" @click="editUser(record)">编辑</a-tag> -->
          <a-tag color="#f50" @click="freightDelete(record)">删除</a-tag>
        </template>
      </a-table>
    </a-layout-content>
    <a-layout-footer>
      <a-pagination
        :pageSizeOptions="pageSizeOptions"
        :total="totalPage"
        :showTotal="(total) => `总共${total}条`"
        :current="pagination.pageNumber"
        showSizeChanger
        showQuickJumper
        @change="paginationChange"
        @showSizeChange="onShowSizeChange"
      ></a-pagination>
    </a-layout-footer>
    <!-- <modalWin
      :visible="visible"
      :confirmLoading="confirmLoading"
      :title="title"
      :userId="userId"
      :rolesList="rolesList"
      @addAction="addAction"
      @addCancel="addCancel"
    ></modalWin> -->

    <!-- 编辑弹窗 -->
    <!-- <a-modal
      width="800px"
      title="编辑公告内容"
      :visible="editDialogShow"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <editor></editor>
    </a-modal> -->
  </div>
</template>

<script>
import { imgUrl } from "@/utils/env-setup";
import * as API from "../../api/freight";
// import modalWin from "./commponent/editFreight.vue";

// import editor from "../../commonComponents/editor/editor.vue";
export default {
  name: "user",
  // components: {
  //   modalWin,
  //   editor,
  // },
  data() {
    return {
      imgUrl,
      ModalText: "Content of the modal",
      // confirmLoading: false,
      // editDialogShow: false,
      form: this.$form.createForm(this),
      pageSizeOptions: ["10", "20", "50"],
      totalPage: undefined,
      pagination: {
        pageNumber: 1,
        pageSize: 10,
        blurry: "",
      },
      rolesList: [],
      visible: false,
      confirmLoading: false,
      title: "新增",
      userId: null,
      loading: false,
      columns: [
        {
          title: "模板名称",
          dataIndex: "templateName",
          align: "center",
          scopedSlots: { customRender: "templateName" },
        },
        {
          title: "属性名",
          dataIndex: "name",
          align: "center",
          scopedSlots: { customRender: "name" },
        },
        {
          title: "属性值",
          dataIndex: "value",
          align: "center",
          scopedSlots: { customRender: "value" },
        },
        {
          title: "操作",
          dataIndex: "action",
          width: "200px",
          align: "center",
          scopedSlots: { customRender: "action" },
        },
      ],
      dataTable: [],
    };
  },
  mounted() {
    this.getFreightList();
  },
  computed: {},
  activated() {},
  methods: {
    getName(arr) {
      let nameList = [];
      if (arr.length > 0) {
        nameList = arr.map((item) => item.name);
      } else {
        nameList = [];
      }
      return nameList.join(",");
    },
    getValue(arr) {
      let valueList = [];
      if (arr.length > 0) {
        valueList = arr.map((item) => item.value);
      } else {
        valueList = [];
      }
      return valueList.join(",");
    },
    addProduct() {
      this.$router.push({
        path: "/product/addProduct",
      });
    },
    addproductInfo(id) {
      console.log(id);
      this.$router.push({
        path: "/product/addProduct",
        query: {
          id: id,
          key: Date.now(),
        },
      });
    },
    // handleOk(e) {
    //   this.confirmLoading = true;
    //   setTimeout(() => {
    //     this.editDialogShow = false;
    //     this.confirmLoading = false;
    //   }, 2000);
    // },
    // handleCancel(e) {
    //   console.log("Clicked cancel button");
    //   this.editDialogShow = false;
    // },
    // editDialog() {
    //   this.editDialogShow = true;
    // },

    getFreightList(status) {
      // let userId = this.userInfo.roles[0].id
      if (status === "status") {
        this.pagination.pageNumber = 1;
      }
      this.loading = true;
      API.getFreight(this.pagination).then((res) => {
        if (res.code === 200) {
          this.dataTable = res.data.records;
          this.totalPage = res.data.total;
          // debugger
        }
        this.loading = false;
      });
    },
    getRolesList() {
      let postBody = { pageSize: 1000, pageNumber: 1 };
      API.getRoles(postBody).then((res) => {
        if (res.code === 200) {
          this.rolesList = res.data.records;
          // console.log(this.rolesList)
        }
      });
    },
    roleSearchChange(value) {
      this.pagination.roleId = value;
      this.getFreightList("status");
    },
    onShowSizeChange(value, pageSize) {
      this.pagination.pageNumber = 1;
      this.pagination.pageSize = pageSize;
      this.getFreightList();
    },
    paginationChange(value) {
      this.pagination.pageNumber = value;
      this.getFreightList();
    },
    initPage() {
      this.pagination.pageNumber = 1;
      this.pagination.pageSize = 10;
      this.pagination.blurry = "";
      this.getFreightList();
    },
    editUser(record) {
      this.title = "编辑";
      this.visible = true;
      this.userId = record.id;
    },
    freightDelete(record) {
      let that = this;
      this.$confirm({
        okText: "确定",
        cancelText: "取消",
        title: "",
        content: "确定进行删除操作？",
        onOk() {
          let arr = [];
          arr.push(record.id);
          API.delFreight(arr).then((res) => {
            if (res.code === 200) {
              that.$message.destroy();
              that.$message.success("删除成功");
              that.getFreightList();
            }
          });
        },
        onCancel() {},
      });
    },
    // addUser() {
    //   this.initUserEdit();
    //   this.visible = true;
    //   this.userId = null
    // },
    initUserEdit() {
      this.title = "新增";
      this.userId = undefined;
    },
    addAction(postUserData) {
      this.confirmLoading = true;
      this.userId
        ? this.editUserSubmit(postUserData)
        : this.addUserSubmit(postUserData);
    },
    addUserSubmit(postUserData) {
      API.addUser(postUserData)
        .then((res) => {
          if (res.code === 200) {
            this.$message.destroy();
            this.$message.success("用户添加成功");
            this.initUserEdit();
            this.getFreightList();
            this.visible = false;
          }
          this.confirmLoading = false;
        })
        .catch(() => {
          this.confirmLoading = false;
        });
    },
    editUserSubmit(postUserData) {
      API.editUser(this.userId, postUserData)
        .then((res) => {
          if (res.code === 200) {
            this.$message.destroy();
            this.$message.success("用户修改成功");
            this.initUserEdit();
            this.getFreightList();
          }
          this.confirmLoading = false;
          this.visible = false;
        })
        .catch(() => {
          this.confirmLoading = false;
          this.visible = false;
        });
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    addCancel() {
      this.visible = false;
      this.userId = undefined;
    },
    toBindMenu() {
      this.$router.push({
        path: "/configGroup",
        key: new Date(),
      });
    },
  },
};
</script>

<style lang="less" scoped>
.selectWidth {
  width: 140px;
}
.abutton {
  margin: 0 10px;
}
</style>